<template>
  <div class="login_page">
    <div class="login_input">
      <div class="input_title">Admin</div>
      <el-input
        v-model="userInput.userName"
        class="input_cls"
        placeholder="userName"
      />
      <el-input
        v-model="userInput.password"
        class="input_cls"
        type="password"
        placeholder="password"
        show-password
      />
      <el-button class="button_cls" type="primary" plain @click="onLogin"
        >Login</el-button
      >
    </div>
  </div>
</template>
<script setup>
import { login } from "@/network/api";
import { reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const userInput = reactive({
  userName: "",
  password: "",
});

const onLogin = () => {
  login({
    userName: userInput.userName,
    password: userInput.password,
  })
    .then((res) => {
      if (res?.data?.token) {
        sessionStorage.setItem("token", res.data.token);
        router.replace({
          path: "/home/goods",
        });
      } else {
        ElMessage({
          message: res?.msg || "login error",
          type: "error",
        });
      }
    })
    .catch((res) => {
      ElMessage({
        message: "login error",
        type: "error",
      });
    });
};
</script>
<style lang="scss" scoped>
.login_page {
  width: 100%;
  height: 100vh;
  background: url("@/assets/login.jpg");
  .login_input {
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .input_title {
      font-size: 30px;
      color: #d7dddd;
      font-weight: bold;
      padding-bottom: 12px;
    }
    .input_cls {
      width: 240px;
      margin-bottom: 12px;
    }
    .button_cls {
      width: 240px;
    }
  }
}
</style>
